<template>
  <div :class="prefixCls">
    <div class="father">
      <div class="scoll">
        <quill-editor
          v-model="content"
          ref="myQuillEditor"
          :content="value"
          :options="editorOption"
          @blur="onEditorBlur($event)"
          @focus="onEditorFocus($event)"
          @ready="onEditorReady($event)"
          @change="onEditorChange($event)"
        >
        </quill-editor>
      </div>
    </div>
  </div>
</template>

<script>
import { quillEditor } from "vue-quill-editor";
import { quillRedefine } from "vue-quill-editor-upload";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";

export default {
  name: "JADPQuill",
  components: { quillEditor },
  props: {
    prefixCls: {
      type: String,
      default: "jadp-editor-quill"
    },
    // 表单校验用字段
    // eslint-disable-next-line
    value: {
      type: String
    },
    placeholder: {
      type: String,
      default: "请输入内容..."
    },
    disable: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      content: this.value,
      editorOption: {
        modules: {
          toolbar: [
            ["bold", "italic", "underline", "strike"],
            [{ header: [1, 2, 3, 4, 5, 6, false] }],
            [{ size: ["small", false, "large", "huge"] }],
            [{ color: [] }, { background: [] }],
            ["blockquote", "code-block"],
            [{ list: "ordered" }, { list: "bullet" }],
            [{ indent: "-1" }, { indent: "+1" }],
            [{ align: [] }],
            [{ direction: "rtl" }],
            ["clean"],
            ["link", "image"]
          ]
        },
        theme: "snow",
        placeholder: this.placeholder
      }
    };
  },

  // created() {
  //   this.editorOption = quillRedefine({
  //     // 图片上传的设置
  //     uplpadConfig: {
  //       action: `${this.define.comUploadUrl}/upload`, // 必填参数 图片上传地址
  //       // 必选参数  res是一个函数，函数接收的response为上传成功时服务器返回的数据
  //       // 你必须把返回的数据中所包含的图片地址 return 回去
  //       res: (respnse) => {
  //         console.log(respnse, "res");
  //         return respnse.data[0].ossAddress; // 这里切记要return回你的图片地址
  //       },
  //       methods: "POST", // 可选参数 图片上传方式  默认为post
  //       token: this.$store.getters.token, // 可选参数 如果需要token验证，假设你的token有存放在sessionStorage // 设置请求头 xhr: 异步请求， formData: 表单对象
  //       header: (xhr, formData) => {
  //         // xhr.setRequestHeader('myHeader','myValue');
  //         // formData.append('token', '1234')
  //       },
  //       name: "img", // 可选参数 文件的参数名 默认为img
  //       size: 500, // 可选参数   图片限制大小，单位为Kb, 1M = 1024Kb
  //       accept: "image/png, image/gif, image/jpeg, image/bmp, image/x-icon", // 可选参数 可上传的图片格式
  //       // input点击事件  formData是提交的表单实体
  //       change: (formData) => {
  //         console.log("进来了");
  //       },
  //       start: () => {}, // 可选参数 接收一个函数 开始上传数据时会触发
  //       end: () => {}, // 可选参数 接收一个函数 上传数据完成（成功或者失败）时会触发
  //       success: () => {}, // 可选参数 接收一个函数 上传数据成功时会触发
  //       error: (ss) => {
  //         console.log(ss, "ss");
  //       }, // 可选参
  //       // 以下所有设置都和vue-quill-editor本身所对应
  //       placeholder: "", // 可选参数 富文本框内的提示语
  //       theme: "", // 可选参数 富文本编辑器的风格
  //       toolOptions: [], // 可选参数  选择工具栏的需要哪些功能  默认是全部
  //       handlers: {}, // 可选参数 重定义的事件，比如link等事件
  //     },
  //   });
  // },
  methods: {
    onEditorBlur(quill) {
      //
    },
    onEditorFocus(quill) {
      if (this.disable) {
        quill.enable(false); //设置富文本编辑器不可编辑
      }
    },
    onEditorReady(quill) {
      //
    },
    onEditorChange({ quill, html, text }) {
      //
      // this.$emit('change', html)
      this.$emit("input", this.content);
    }
  },
  computed: {
    editor() {
      return this.$refs.myQuillEditor.quill;
    }
  },
  watch: {
    value(val) {
      this.content = val;
    },
    placeholder(val) {
      this.$set(this.editorOption, "placeholder", val);
    }
  }
};
</script>
<style lang="scss" scoped>
.father {
  height: 280px;
  width: 98%;
  border-right: 1px solid rgb(220, 223, 230);
  border-bottom: 1px solid rgb(220, 223, 230);
  overflow: hidden;
  .scoll {
    width: 102%;
    height: 310px;
    overflow-y: auto;
  }
}
.jadp-editor-quill {
  >>> .ql-editor {
    height: 230px;
  }
  >>> .ql-toolbar.ql-snow {
    border: 1px solid #dcdfe6;
    border-bottom: 0;
    border-radius: 4px 4px 0 0;
  }
  >>> .ql-container.ql-snow {
    border: 1px solid #dcdfe6;
    border-radius: 0 0 4px 4px;
  }
}
</style>
